<template>
    <div>
     <van-nav-bar title="不凡" left-text="返回" left-arrow @click-left="onClickLeft"/>
     <van-search class="iptSearch" v-model="search" @input="searchs" placeholder="搜索" />
        <!-- 9.中心点 -->
        <ul>
            <!-- <li> -->
            <li v-for="item in list" :key="item.id">
            {{item.title}}
            </li>
        </ul>
        <p>显示当前位置</p>
        <div id="allmap"></div>
    </div>
</template>

<script>
    import {mapState} from "vuex"
    export default {
        data(){
            return{
                search:"",
                list:"",
                map:""
            }
        },
        computed:{
             ...mapState(['cityInfo'])//8
            
        },
        mounted(){
            var _this=this;
            var map = new BMap.Map("allmap");    // 创建Map实例
            this.map=map;//map实例用this引进来
            // var point=[];
           map.centerAndZoom(new BMap.Point(this.cityInfo.longitude, this.cityInfo.latitude), 11); //中心点(经度,维度 将数字替换成传参(a,b))
        //    10.获取焦点位置
        var mk = new BMap.Marker(this.cityInfo.point);//改成当前城市的焦点
			map.addOverlay(mk);
            map.panTo(this.cityInfo.point);//r.point都改成this.cityInfo.point
            // 11.关键字搜索 =>本地检索的数据接口
	       var options = {
		onSearchComplete: function(results){
			// 判断状态是否正确
			if (local.getStatus() == BMAP_STATUS_SUCCESS){
                _this.list=results.Hr;//12.将获取的数据展现
                console.log(results);
            }
            }
        };
        var local = new BMap.LocalSearch(this.map, options);//把map实例放到上面,用this引进来
        local.search(this.search);
        },
       methods: {
           searchs(){
             var _this=this;
            // var mk = new BMap.Marker(this.cityInfo.point);//改成当前城市的焦点
			// map.addOverlay(mk);
            // map.panTo(this.cityInfo.point);//r.point都改成this.cityInfo.point
            // 11.关键字搜索 =>本地检索的数据接口
	       var options = {
		onSearchComplete: function(results){
			// 判断状态是否正确
			if (local.getStatus() == BMAP_STATUS_SUCCESS){
                _this.list=results.Hr;//12.将获取的数据展现
				console.log(results);
            }
        }
		};
	var local = new BMap.LocalSearch(this.map, options);//把map实例放到上面,用this引进来
	local.search(this.search);
        },
        // 左箭头返回上一页
         onClickLeft() {
      this.$router.go(-1);
    },
       },
    };
</script>

<style scoped lang="scss">

#allmap{
   height: 300px;
    margin-top: 300px;
    position: fixed;
    bottom: 0;
    width: 100%;
}
p{  
    font-size: 16px;
    font-weight:700px;
    padding: 10px;
}
</style>